<template>
  <div class="connect">
    <div class="table_data">
      <el-table :data="tableData" border row-key="id" default-expand-all :tree-props="{children: 'child', hasChildren: 'hasChildren'}" stripe style="width: 100%" >
        <el-table-column prop="userAccount" align="center" :label="$t('login.username')" width="180"> </el-table-column>
        <el-table-column prop="apiAccount" align="center"  min-width="180"  :label="$t('public.api_account')">
          <template slot-scope="{row}">
            {{row.apiAccount?row.apiAccount:'-'}}
          </template>
        </el-table-column>
        <el-table-column prop="apiSecret" align="center"  min-width="230"  :label="$t('public.api_Retail')">
          <template slot-scope="{row}">
            {{row.apiSecret?row.apiSecret:'-'}}
          </template>
        </el-table-column>
        <el-table-column prop="modifyTime" min-width="180" align="center"  :label="$t('Order_module.Last_operation_time')">
          <template slot-scope="{row}">
            {{row.modifyTime?row.modifyTime:'-'}}
          </template>
        </el-table-column>
        <el-table-column prop="addTime" align="center" min-width="180" :label="$t('public.Creation_time')">
          <template slot-scope="{row}">
            {{row.addTime?row.addTime:'-'}}
          </template>
        </el-table-column>

        <el-table-column fixed="right" prop="apiSecret" align="center"  :label="$t('public.operate')">
          <template slot-scope="{row}">
           <el-popconfirm
              :confirm-button-text="$t('public.determine')"
              :cancel-button-text="$t('public.cancellation')"
              icon="el-icon-info"
              @confirm="modifyApi(row)"
              :title="$t('public.Are_you_sure_about_this_operation')"
            >
              <el-button slot="reference" type="text">{{$t('public.update')}}API</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>

      </el-table>
       <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 40, 200, 400]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
    </div>

  </div>
</template>

<script>
  import {
    apiAccount,
    modifyApi
  } from '@/api/wqzApi'
  export default {
    data() {
      return {
        page:1,
        limit:10,
        total:0,
        tableData: []
      }
    },
    mounted() {
      this.getList()
    },
    methods:{
      modifyApi(row){
        var data =  {
          id:row.id
        }
        modifyApi(data).then(res=>{
          this.$message({
            type:'success',
            message:this.$t('public.Operation_successful')

          })
          this.getList()
        })
      },
      handleSizeChange(e){
        this.limit=e
        this.getList()
      },
      handleCurrentChange(e){
        this.page = e
        this.getList()
      },
      getList(){
        var data = {
          page:this.page,
          limit:this.limit,
        }
        apiAccount(data).then(res=>{
          console.log(res , '杩斿洖鍙傛暟')
          this.tableData = res.page.list
          this.total = res.page.totalCount

        })
      }
    }
  }
</script>
<style lang="scss" scoped type="text/css">
  .connect{
    width: 100%;
    padding: 1vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .table_data{
    width: 100%;
    padding: 1vw;
    box-sizing: border-box;
    background-color: #fff;
  }
</style>
